<!DOCTYPE HTML>
<html>
    <head>
        <meta name="viewport" content="width=320; user-scalable=no" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Asen Chat</title>
        
        <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0.css" type="text/css"/>
        <link rel="stylesheet" href="pgandjqm-style-override.css" type="text/css"/>
        <script type="text/javascript" charset="utf-8" src="jquery.mobile/jquery-1.6.4.min"></script>
        <script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
        <script type="text/javascript" charset="utf-8" src="jquery.mobile/jquery.mobile-1.0.js"></script>
        <script type="text/javascript" charset="utf-8" src="scripts/gibberish-aes.js"></script>
        <script type="text/javascript" charset="utf-8" src="scripts/sha1.js"></script>
        <script type="text/javascript" charset="utf-8" src="scripts/utils.js"></script>
        <script type="text/javascript" charset="utf-8" src="scripts/asenChat.js"></script>
        <script type="text/javascript" charset="utf-8" src="main.js"></script>
  
    <!-- CDN Respositories: For production, replace lines above with these uncommented minified versions -->
    <!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />-->
    <!-- <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>-->
    <!-- <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>-->
    </head>
    <body>
        <!-- Login Page begin -->
        <div id="loginPage" data-role="page" data-theme="b">
            <div data-role="header" data-position="fixed" data-theme="b">
                <h1>AsenChat v1.2</h1>
                <a data-icon="gear" data-role="button" class="ui-btn-right" id="settingsButton">Settings</a>
            </div>
            <div id="loginPageForms" data-role="content" data-theme="b" data-inset="true">
                <ul data-role="listview" data-theme="b" data-inset="true">
                    <li data-icon="arrow-d"><a id="displayLogin">Login</a></li>
                    <section id="loginForm">
                        <label >Enter your phoneNumber:</label>
                        <input id="userMSISDN" type="text" name="userMSISDN" required="true" title="+<country-code><operator-code><number>(3-20 numbers). For example +359883123456."/>
                        <label>Enter your password:</label>
                        <input id="userPassword" type="password" name="userPassword" required="true"/>
                        <a id="loginButton" data-role="button" data-theme="c" data-icon="arrow-r" data-iconpos="right">Login</a>
                    </section>
                    <li data-icon="arrow-r"><a id="displayRegister">Register</a></li>
                    <section id="registerForm" style="display:none">
                        <label>Enter your phoneNumber:</label>
                        <input id="registerUserMSISDN" type="text" name="userMSISDN" required="true" title="+<country-code><operator-code><number>(3-20 numbers). For example +359883123456."/>
                        <label>Enter password:</label>
                        <input id="regPassword" type="password" name="regPassword" required="true"/>
                        <label>Re-enter password:</label>
                        <input id="regPasswordConfirm" type="password" name="regPasswordConfirm" required="true"/>
                        <a id="registerButton" data-role="button" data-theme="c" data-icon="arrow-r" data-iconpos="right">Register</a>
                    </section>
                </ul>
            </div>
            <div id="settingsPage" data-role="content" data-theme="b" style="display: none">
                <ul data-role="listview" data-theme="b" data-inset="true">
                    <li data-role="list-divider" data-icon="gear" data-iconpos="left"><h1>Settings</h1></li>
                    <section id="settingsForm" style="padding: 1em;">
                        <fieldset class="ui-grid-a">
                            <div class="ui-block-a">
                                <label>Delay between checks:</label>
                            </div>
                            <div class="ui-block-b">
                                <input id="messageCheckInterval" type="text" title="Dalay between messeges retrieving from server in milliseconds(>500)."/>
                            </div>
                        </fieldset>
                        <fieldset class="ui-grid-a">
                            <div class="ui-block-a">
                                <label>Log Level:</label>
                             </div>
                            <div class="ui-block-b">
                                <select id="logLevel" data-theme="c">
                                    <option value="DEBUG">Debug</option>
                                    <option value="INFO">Info</option>
                                    <option value="WARN">Warn</option>
                                    <option value="ERROR">Error</option>
                                </select>
                            </div>
                        </fieldset>
                        <fieldset class="ui-grid-a">
                            <div class="ui-block-a">
                                <label>Service URL:</label>
                            </div>
                            <div class="ui-block-b">
                                <input id="serviceURL" type="text" title="Location of chat service."/>
                            </div>
                        </fieldset>
                    </section>
                </ul>
                <fieldset class="ui-grid-a">
                    <div class="ui-block-a">
                        <a id="cancelSettingsSaving" data-role="button" data-icon="delete" data-iconpos="left">Cancel</a>
                    </div>
                    <div class="ui-block-b">
                        <a id="saveSettings" data-role="button" data-icon="check" data-iconpos="left">Save</a>
                    </div>
                </fieldset>
            </div>
            <div data-role="footer" data-position="fixed"  data-theme="b">
                <h1>Asen Asenov &reg;</h1>
            </div>
        </div>
        <!-- Login Page end -->
      
        <!-- Main Page begin -->
        <div id="usersPage" data-role="page" data-theme="b">
            <div data-role="header" data-position="fixed" data-theme="b">
                <a data-role="button" data-icon="delete" id="exitButton">Exit</a>
                <h1>AsenChat v1.2</h1>
                <a data-icon="gear" data-role="button" class="ui-btn-right" id="programLogsButton">Logs</a>
            </div>
            <div id="onlineUsers" data-role="content" data-theme="b">
                <!-- Users here are load dynamicly -->
            </div>
            <div id="programLogsPage" data-role="content" data-theme="b" style="display: none">
                <!-- Here we will log message information with various Log level -->
                <div style="padding: 1em;" id="programLogsDiv">
                    <!-- Content will be dynamic logged -->
                </div>
            </div>
            <div data-role="footer" data-position="fixed" data-theme="b">
                <!-- Navigation bar -->
                <div style="float: left;">
                    <a id="homeButton" data-role="button" data-icon="home" data-iconpos="left">Users</a>
                </div>
            </div>
        </div>
        <!-- Main Page end -->
      
        <!-- Start Chat Page begin -->
        <div id="startChatPage" data-role="page" data-theme="b">
            <div data-role="header" data-theme="b" data-position="fixed">
                <a data-role="button" data-icon="delete" data-iconpos="notext" id="canselStartChat"></a>
                <h1>Start Chat</h1>
            </div>
            <div data-role="content" data-theme="b">
                <!-- Ask for password for the chat -->
                <section id="startChatRequestForm">
                    <label>Enter chat key:</label>
                    <input id="chatKeyChalange" type="password" required="true"/>
                    <a id="sendChallange" data-role="button" data-icon="arrow-r" data-iconpos="right">Start chat</a>
                </section>
            </div>
            <div data-role="footer" data-theme="b" data-position="fixed">
                <h1><!-- Here we will pyt user number --></h1>
            </div>
        </div>
        <!-- Start Chat Page end -->
        
        <!-- Chat Invitation Page begin -->
        <div id="chatInvitationPage" data-role="page" data-theme="b">
            <div data-role="header" data-theme="b" data-position="fixed">
                <a data-role="button" data-icon="delete" data-iconpos="notext" id="canselChatInvitation"></a>
                <h1>Chat Invitation</h1>
            </div>
            <div data-role="content" data-theme="b">
                <!-- Ask for password for the chat -->
                <section id="chatInvitationReseivedForm">
                    <label>Enter chat key:</label>
                    <input id="chatKeyResponse" type="password" required="true"/>
                    <input id="challangeKeyReseived" type="hidden"/>
                    <a id="sendResponse" data-role="button" data-icon="arrow-r" data-iconpos="right">Start chat</a>
                </section>
            </div>
            <div data-role="footer" data-theme="b" data-position="fixed">
                <h1><!-- Here we will pyt user number --></h1>
            </div>
        </div>
        <!-- Chat Invitation Page end -->
    </body>
</html>
